<template>
  <div class="tabPanel zhangdie hangqing">
    <div class="tabtitle">
      <li
        v-for="(item, index) in tabList"
        :key="item.text"
        :class="{ hit: item.active }"
        @click="handleClick(index)"
      >
        {{ item.needI18n ? $t(item.text) : item.text }}
      </li>
    </div>
    <div class="panes" style="padding:1%">
      <div class="pane">
        <ul class="biaotou">
          <li class="left">{{ $t('名称') }}</li>
          <li class="mid">{{ $t('最新价') }}</li>
          <li class="right">{{ $t('涨跌幅') }}</li>
        </ul>
        <nuxt-link v-for="(item, key) in listData" :key="key" :to="`/kline?symbol=${key}`">
          <ul class="xinxi">
            <li class="left">
              <p><strong>{{ coinPairInfo[key].stock }}</strong>/{{ coinPairInfo[key].money }}</p>
              <p>24H {{ item.deal | formatSize() }}</p>
            </li>
            <li class="mid">
              <p><strong>{{ realTimeQuotes[key].last | priceFormat(coinPairInfo[key].decimals) }}</strong></p>
              <p>≈{{ currency.symbol }}{{ key | currencyPrice('last') | numberFormat }}</p>
            </li>
            <li v-if="item.last < item.open" class="right">
              <span class="die">{{ item | fluctuation }}</span>
            </li>
            <li v-else class="right">
              <span>{{ item | fluctuation }}</span>
            </li>
          </ul>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style src="./index.css" scoped></style>
